<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="24" :sm="24">
            <span
              class="table-page-search-submitButtons"
            >
              <!-- <a-button
                type="danger"
                @click.stop="exportExcel"
                style="margin-left:8px"
                :loading="exportLoading"
                :disabled="exportLoading"
              >
                <a-icon type="cloud-download" style="color:white"/>
                <span>导出</span>
              </a-button> -->
              <a-button
                type="primary"
                @click.stop="handleSync"
                style="margin-left:8px"
                :loading="syncLoading"
                :disabled="syncLoading"
              >
                <a-icon type="sync" style="color:white"/>
                <span>同步</span>
              </a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <a-table
      ref="table"
      :row-key="
        (record) => {
          return record.orderId
        }
      "
      :columns="columns"
      :data-source="data"
      :loading="loading"
      :pagination="pagination"
      @change="onChange"
      :scroll="{ x: 1300 }"
    >
    </a-table>
  </a-card>
</template>

<script>
import moment from 'moment'
const columns = [
  {
    title: 'ID',
    dataIndex: 'orderId',
    width: '120px'
  },
  {
    title: '活动名称',
    dataIndex: 'actName',
    width: '130px'
  },
  {
    title: '订单号',
    dataIndex: 'orderSn',
    width: '240px'
  },
  {
    title: '订单名称',
    dataIndex: 'orderTitle',
    width: '360px'
  },
  {
    title: '用户唯一码',
    dataIndex: 'uniCode',
    width: '160px'
  },
  {
    title: '订单金额',
    dataIndex: 'orderPrice',
    width: '150px'
  },
  {
    title: '支付金额',
    dataIndex: 'payPrice',
    width: '150px'
  },
  {
    title: '佣金比例额',
    dataIndex: 'jtkShareRate',
    width: '150px'
  },
  {
    title: '佣金金额',
    dataIndex: 'jtkShareFee',
    width: '150px'
  },
  {
    title: '下单时间',
    dataIndex: 'createTime',
    width: '200px'
  },
  {
    title: '支付时间',
    dataIndex: 'payTime',
    width: '200px'
  },
  {
    title: '更新时间',
    dataIndex: 'modifiedTime',
    width: '200px'
  },
  {
    title: '订单状态',
    dataIndex: 'statusText',
    width: '120px'
  },
  {
    title: '结算状态',
    dataIndex: 'orderStatusText',
    fixed: 'right',
    width: '120px'
  }
]

export default {
  name: 'GoodsOrderList',
  data() {
    return {
      columns,
      loading: false,
      data: [],
      pagination: {
        showQuickJumper: true,
        showSizeChanger: true,
        defaultCurrent: 1, // 默认当前页数
        defaultPageSize: 10, // 默认当前页显示数据的大小
        total: 0, // 总数，必须先有
        pageSizeOptions: ['10', '20', '30', '50', '100'],
        showTotal: (total, range) => {
          return (
            <div>
              共 <span>{total}</span> 条
            </div>
          )
        },
        onShowSizeChange: (current, pageSize) => {
          this.pageSize = pageSize
        }
      },
      queryParam: {
        // orderNo: '',
        // userName: '',
        // userMobile: '',
        // orderStatus: '',
        // startDate: '',
        // endDate: ''
      },
      // 高级搜索 展开/关闭
      advanced: false,
      exportLoading: false, // 导出状态
      syncLoading: false // 同步状态
    }
  },
  mounted() {
    // 获取列表
    this.fetch()
  },
  methods: {
    // 开始时间
    onStartDateChange(data, dataString) {
      this.queryParam.startDate = dataString
    },
    // 结束时间
    onEndDateChange(data, dataString) {
      this.queryParam.endDate = dataString
    },
    // 改变每页数量时更新显示
    onChange(pagination) {
      this.pagination.defaultCurrent = pagination.current
      this.pagination.defaultPageSize = pagination.pageSize
      this.fetch()
    },
    // 搜索
    searchBtn() {
      this.pagination.defaultCurrent = 1
      this.fetch()
    },
    // 动态获取列表
    fetch() {
      this.loading = true
      const params = {
        page: this.pagination.defaultCurrent,
        pagesize: this.pagination.defaultPageSize
      }
      this.$common
        .fetchList('/jutuike/orderLists', Object.assign(params, this.queryParam))
        .then((data) => {
          this.loading = false
          if (data.code === 200) {
            const result = data.data
            const pagination = { ...this.pagination }
            pagination.total = result.totalInfo.total
            this.data = result.lists
            this.pagination = pagination
          }
        })
        .catch(() => {
          this.$notification.error({
            message: '错误',
            description: '请求信息失败，请重试'
          })
        })
    },
    // 导出
    exportExcel() {
      this.exportLoading = true
      this.$common.exportExcel('orders/export', this.queryParam)
      .then(res => {
        this.exportLoading = false
        this.exportExcelFile(res)
      })
    },
    exportExcelFile (exportData) {
      const link = document.createElement('a')
      // type就是blob的type,是MIME类型的，可以自己查看MIME类型都有哪些
      const blogw = new Blob([exportData], { type: 'application/vnd.ms-excel;charset=utf-8' })
      const objectUrl = window.URL.createObjectURL(blogw) // 创建一个新的url对象
      link.href = objectUrl
      const fileName = `订单 ${moment().format('YYYYMMDDHHmmss')}.xlsx`
      link.download = fileName // 下载的时候自定义的文件名
      link.click()
      window.URL.revokeObjectURL(objectUrl) // 为了更好地性能和内存使用状况，应该在适当的时候释放url.
      this.fetch()
    },
    // 同步
    handleSync() {
      this.syncLoading = true
      this.$common.handleGet('/jutuike/synchroOrders')
      .then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg)
        }
      })
      .finally(() => {
        this.syncLoading = false
      })
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    resetSearchForm() {
      this.queryParam = {}
    }
  }
}
</script>
